import React, { Component } from 'react';
import '../components/List3.scss'
import logo from '../images2/z06.gif'

class List3 extends Component {
      constructor(props){
            super(props);
            this.state={
                  arr1:['活动专区','品牌','美容护肤','彩妆','香水','酒类','腕表首饰','服饰箱包','食品保健'],
                  arr2:[
                        {name:'卸妆',pic:logo},
                        {name:'洁面/去角质',pic:logo},
                        {name:'爽肤水/喷雾',pic:logo},
                        {name:'乳液',pic:logo},
                        {name:'精华/精油',pic:logo},
                        {name:'面霜',pic:logo},
                        {name:'面膜',pic:logo},
                        {name:'防晒隔离',pic:logo},
                        {name:'润唇膏/唇膜',pic:logo},
                        {name:'面部套装',pic:logo},
                        {name:'其他面部',pic:logo},
                  ]
            }
      }
      render() {
            return (
                  <div className='fenlei'>
                        <div>分类</div>
                        <div>
                              <input type="text"  placeholder='搜索店铺内商品'/>
                        </div>
               <div className='box'>
               <div className='list3'>
                        {
                              this.state.arr1.map((item,index)=>{
                                    return(
                                          <div className='cate' key={index}>
                                                <div>{item}</div>
                                          </div>
                                    )
                              })
                        }
                        
                  </div>
                  <div className='list4'>
                        {
                              this.state.arr2.map((item,index)=>{
                                    return(
                                          <div className='cate' key={index}>
                                               <img src={item.pic} alt="" />
                                               <p>{item.name}</p>
                                          </div>
                                    )
                              })
                        }
                        
                  </div>
               </div>
                  </div>
            );
      }
}

export default List3;